<template>
  <el-dropdown class="dropdown" @command="handleCommand">
    <div class="userinfo">
      <el-avatar :size="35" :src="avatars" />
      <span style="padding: 0 5px;">{{ userStore.UserInfos?.name }}</span>
    </div>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item command=3>Gitee</el-dropdown-item>
        <el-dropdown-item divided command=1>个人中心</el-dropdown-item>
        <el-dropdown-item command=2>退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup lang="ts">
import { useUserStore } from '@/stores';
// import { storeToRefs } from 'pinia';
import { computed } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter()
type command = string | number | object

const userStore = useUserStore()

const avatars = computed(() => userStore.UserInfos ? userStore.UserInfos?.avatar : 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png')

const handleCommand = (command: command) => {
  switch (command) {
    case '1':
      showUserInfo()
      break;
    case '2':
      logout()
      break;
    case '3':
      Gitee()
      break;
    default:
      break;
  }
}

// 个人中心
const showUserInfo = () => {
  ElMessageBox.alert('用户个人中心', {
    confirmButtonText: '确定',
    callback: () => {
      ElMessage({
        type: 'info',
        message: `暂未开发`,
      })
    },
  })
}
const Gitee = () => {
  window.location.href = 'https://gitee.com/hu-ge-hhb/vuea-dmin.git'
}

// 退出登录
const logout = async () => {
  await userStore.logout()
  router.push('/login')
  // window.location.reload()
}
</script>

<style lang="scss" scoped>
.dropdown {
  .userinfo {
    display: flex;
    align-items: center;
  }
}
</style>
